// 用来获取设置路径用的
const path = require('path');

// 导入配置 css 出口的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 导入 html 出口插件
// 打包之后在 dist 的目录中有打包好的 js 文件 和 css 文件 
// 那么现在我要让这些文件和 html 文件产生联系。
const HtmlWebpackPlugin = require('html-webpack-plugin')

// console.log('当前路径为：', __dirname);


const VueLoader = require('vue-loader/lib/plugin')



// 就是 webpack 的配置
module.exports = {
    //开发环境(写代码的阶段) development
    //生产环境(代码已经写好已经部署到服务器了) production
    //测试环境(代码已经写好了但是还没有部署) production
    mode: 'development',
    // 指明项目的入口文件
    // entry: './src/main.js',
    entry: {
        app: './src/main.js'
    },
    // 项目的出口文件
    output: {
        // 设置打包之后文件放在 dist 目录下
        // __dirname：获取到当前文件所在的目录路径
        path: path.resolve(__dirname, 'dist'),
        // 打包之后文件的名字叫什么
        // [hash:8] 随机 8 为字符的名字
        filename: 'js/[name].[hash:8].js',
        // 清除之前打包的文件 +++++++++++++++++++++++++++++++++
        clean: true
    },
    //插件
    plugins: [
        // 将 /public/index.html 文件渲染到打包目录中
        new HtmlWebpackPlugin({
            // 模板
            template: './public/index.html'
        }),
        new MiniCssExtractPlugin({
            // css 文件单独打包后的文件位置
            filename: 'css/[hash:8].css'
        }),
        // 配置 vue 插件
        new VueLoader(),
    ],
    //加载器
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.scss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            },
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
            {
                test: /\.(js|jsx)$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                '@babel/preset-env', // js 的新语法
                                '@babel/preset-react' // react 的语法
                            ]
                        }
                    }
                ]
            },
            {
                // 图片配置
                test: [/\.jpe?g$/, /\.png$/, /\.svg$/, /\.git$/, /\.weeb$/, /\.weep$/],
                type: 'asset', //通用 资源类型 将文件类型转换为base64
                parser: {
                    dataUrlCondition: {
                        maxSize: 5 * 1024,  // 5kb
                    },
                }
            },
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ]
    },
    resolve: {
        //
        alias: {
            // 配置别名， @ 表示 src 路径
            '@': path.resolve(__dirname, './src')
        },
        // 配置无需写后缀名
        extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    devServer: {
        port: 3000, // 设置端口号
        // 设置跨域的代理 
        proxy: [
            {
                context: ['/api'],
                target: 'http://open.douyucdn.cn',
                changeOrigin: true,
            },
        ]
    },

}